<template>
  <el-select
    v-model="currentValue"
    filterable
    clearable
    remote
    placeholder="请输入关键词"
    :remote-method="querySearch"
    :loading="loading"
    @change="handleSelect"

    style="width: 100%"
  >
    <el-option
      v-for="item in users"
      :key="item.id"
      :label="item|userLabel"
      :value="item.id">
      <slot>
        <div class="user-info">
          <div class="user-pic">
            <img :src="item.figureUrl">
          </div>
          <div class="user-name">
            {{item.userName}}
            <div>({{item.nickName}})</div>
          </div>
        </div>
      </slot>
    </el-option>
  </el-select>
</template>
<script>
  import FrontService from 'src/service/front'

  export default {
    name: 'HUserChoose',
    data() {
      return {
        currentValue: null,
        oldquery: null,
        users: [],
        loading: false,
        search: {
          key: null,
          pagination: {
            total: 0,
            page: 1,
            limit: 10
          }
        }
      }
    },
    watch: {
      value: function (newValue, oldValue) {
        const me = this
        if (newValue != oldValue && newValue != this.currentValue) {
          if (newValue != null) {
            me.loading = true
            FrontService.customer(newValue).then(data => {
              if (data != null) {
                me.users = data.datas
              }
              me.loading = false
            })
          }
        }
        this.currentValue = newValue
      }
    },
    props: {
      value: {
        type: Number
      }
    },
    filters: {
      userLabel: function (data) {
        if (data != null) {
          let name = data.userName
          if (data.nickName != null) {
            name = name + '(' + data.nickName + ')'
          }
          return name
        }
        return ''
      }
    },
    methods: {
      handleSelect(item) {
        if (item == '') {
          this.$emit('handleSelect', null)
          this.$emit('input', null)
        } else {
          const selectItem = this.users.filter(data => {
            return data.id == item
          })
          this.$emit('handleSelect', selectItem)
          this.$emit('input', item)
        }
      }
      ,
      querySearch(queryString, cb) {
        const me = this
        if (queryString == me.oldquery && me.users != null && me.users.length > 0 && me.oldquery != null) {

        } else {
          if (queryString == null || queryString == '') {
            this.search.key = null
          } else {
            this.search.key = queryString
          }
          me.loading = true
          FrontService.customerList(this.search).then(data => {
            me.oldquery = queryString
            if (data != null) {
              me.users = data.datas
            } else {
              me.users = []
            }
            me.loading = false
          })
        }
      }
      ,
    },
    mounted: function () {
      if (this.value != null) {
        this.currentValue = this.value
        const me = this
        me.loading = true
        FrontService.customer(this.value).then(data => {
          if (data != null) {
            me.users = data.datas
          }
          me.loading = false
        })
      }
    }
  }
</script>
